<template>
  <div>
    <el-form class="pad-t-15 form-diy">
      <el-form-item label="背景颜色" label-width="80px" class="none-mar-b pad-b-15">
        <div class="flex font-12 pad-r-30">
          <el-color-picker v-model="details.backColor" class="mar-l-12"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item label="标题设置" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex v-align-c font-12 pad-r-30 pad-l-10 pad-t-10">
          <el-radio v-model="titleRadio" label="1" @change="titleRadioChange">自定义</el-radio>
          <el-radio v-model="titleRadio" label="2" @change="titleRadioChange">无标题</el-radio>
        </div>
        <div class="mar-l-12 mar-r-12 pad-t-10" v-if="titleRadio === '1'">
          <el-input placeholder="联系我们" style="width: 240px" v-model="details.formDTO.title"/>
        </div>
      </el-form-item>
      <el-form-item label="按钮颜色" label-width="80px" class="none-mar-b pad-b-15">
        <div class="flex font-12 pad-r-30">
          <el-color-picker v-model="details.formDTO.buttonColor" class="mar-l-12"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item label="按钮名称" label-width="80px" class="none-mar-b pad-b-10">
        <div class="mar-l-12 mar-r-12">
          <el-input placeholder="确定提交" style="width: 240px" v-model="details.formDTO.buttonName"/>
        </div>
      </el-form-item>
      <div class="pad-12">
        <div class="font-14 font-w edit-t-title">编辑表单</div>
        <el-table style="width: 100%" class="input-table" :data="details.formDTO.formDetailDTOS">
          <el-table-column min-width="100px" label="类型" prop="formType" align="center">
            <template slot-scope="scope">
              {{ formTypes[scope.row.formType] }}
            </template>
          </el-table-column>
          <el-table-column min-width="120px" label="字段名称" prop="formName" align="center">
            <template slot-scope="scope">
              <!--<template v-if="scope.row.sortNo == 0">-->
                <!--{{scope.row.formName}}-->
              <!--</template>-->
              <!--<template v-else>-->
                <el-input style="width: 100px" v-model="scope.row.formName"></el-input>
              <!--</template>-->
            </template>
          </el-table-column>
          <el-table-column min-width="50px" label="必填" prop="needFlag" align="center">
            <template slot-scope="scope">
              <!--<template v-if="scope.row.sortNo == 0">-->
                <!--<el-checkbox v-model="needFlagYes" disabled></el-checkbox>-->
              <!--</template>-->
              <!--<template v-else>-->
                <el-checkbox v-model="scope.row.needFlag == '1'? true:false" @change="changeNeedFlag(scope.row)"></el-checkbox>
              <!--</template>-->
            </template>
          </el-table-column>
          <el-table-column min-width="190px" label="设置" prop="ruleSettingType">
            <template slot-scope="scope" align="center">
              提示语: &nbsp; <el-input style="width: 100px" v-model="scope.row.tipsName"></el-input>
            </template>
          </el-table-column>
          <el-table-column min-width="130px" label="操作" align="center">
            <template slot-scope="scope">
              <a @click="upRecord(scope.$index)"><span style="color: #2d8cf0">上移</span></a>
              <a @click="downRecord(scope.$index)"><span style="color: #2d8cf0">下移</span></a>
              <a @click="deleteRecord(scope.$index)"><span style="color: red">删除</span></a>
            </template>
          </el-table-column>
        </el-table>
        <div class="pad-t-10">
          <el-select v-model="formType" placeholder="请选择">
            <el-option
              v-for="(value, key) in formTypes"
              :key="key"
              :label="value"
              :value="key">
            </el-option>
          </el-select>
          <el-button type="primary" @click="addRule">新增一个字段</el-button>
        </div>
      </div>

    </el-form>
  </div>
</template>

<style lang="less" scoped>
.edit-t-title{
  color: #606266;
}
</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getToken } from '@/utils/auth'
  import { getQiniuToken } from '@/api/common/common'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          componentVideoDTO: {},
          formDTO: {
            componentFormId: '',
            detailsId: '',
            title: '联系我们',
            buttonName: '确定提交',
            buttonColor: '#409EFF',
            formDetailDTOS: []
          },
          sellType: '0',
          listStyle: '1'
        },
        formTypes: {
          1: '单行文本',
          2: '手机号'
        },
        titleRadio: '1',
        formType: '1',
        fileLoading: false,
        fileLoadingPicture: false,
        qiniuToken: {},
        myDict: {},
        visible: false,
        showFlag: false
      }
    },
    watch: {
      dict: function(val, oldval) {
        const ruleSettingType = val.ruleSettingType
        const textDict = {}
        const fileDict = {}
        for (const key in ruleSettingType) {
          if (key.startsWith('1')) {
            textDict[key] = ruleSettingType[key]
          }
          if (key.startsWith('2')) {
            fileDict[key] = ruleSettingType[key]
          }
        }
        this.myDict = val
        this.myDict.textDict = textDict
        this.myDict.fileDict = fileDict
      }
    },
    // 初始化页面
    created() {
      const that = this
      this.resetDetails()
      this.details = this.details1
      this.details.upperLowerMargins = Number(this.details1.upperLowerMargins)
      this.details.sideMargin = Number(this.details1.sideMargin)
      if (this.details.formDTO.title) {
        this.titleRadio = '1'
      } else {
        this.titleRadio = '2'
      }
      if (this.details.formDTO.formDetailDTOS.length === 0) {
        this.details.formDTO.formDetailDTOS.push({ formName: '姓名', formType: '1', needFlag: '1', sortNo: 0, tipsName: '请输入姓名' })
        this.details.formDTO.formDetailDTOS.push({ formName: '手机号', formType: '2', needFlag: '1', sortNo: 1, tipsName: '请输入手机号' })
      }
      this.token = { accessToken: getToken() }
      getQiniuToken().then(response => {
        if (response.isError) return
        that.qiniuToken = { token: response.data }
      })
      this.$bus.$on('resetDetailsInput' + this.eventId, function(details) {
        that.details = details
        that.details.upperLowerMargins = Number(details.upperLowerMargins)
        that.details.sideMargin = Number(details.sideMargin)
        if (that.details.formDTO.title) {
          that.titleRadio = '1'
        } else {
          that.titleRadio = '2'
        }
      })
    },
    methods: {
      addRule() {
        const formType = this.formType
        if (!this.$utils.isExist(formType)) {
          this.$message({
            type: 'warning',
            message: '请选择规则类型'
          })
          return
        }
        var data = {
          formType: formType,
          needFlag: '0',
          sortNo: this.details.formDTO.formDetailDTOS.length
        }
        const formDetailDTOS = this.details.formDTO.formDetailDTOS
        formDetailDTOS.push(data)
        this.details.formDTO.formDetailDTOS = formDetailDTOS
      },
      changeNeedFlag(row) {
        const flag = row.needFlag
        if (flag === '1') {
          row.needFlag = '0'
        } else {
          row.needFlag = '1'
        }
      },
      // 交换数组元素
      swapItems(arr, index1, index2) {
        arr[index1].sortNo = index2
        arr[index2].sortNo = index1
        arr[index1] = arr.splice(index2, 1, arr[index1])[0]
        return arr
      },
      // 上移
      upRecord(index) {
        const formDetailDTOS = this.details.formDTO.formDetailDTOS
        if (index === 0) {
          return
        }
        this.details.formDTO.formDetailDTOS = this.swapItems(formDetailDTOS, index, index - 1)
      },
      // 下移
      downRecord(index) {
        const formDetailDTOS = this.details.formDTO.formDetailDTOS
        if (index === formDetailDTOS.length - 1) {
          return
        }
        this.details.formDTO.formDetailDTOS = this.swapItems(formDetailDTOS, index, index + 1)
      },
      // 删除记录
      deleteRecord(index) {
        const formDetailDTOS = this.details.formDTO.formDetailDTOS
        formDetailDTOS.splice(index, 1)
        for (let i = 0; i < formDetailDTOS.length; i++) {
          formDetailDTOS[i].sortNo = i
        }
        this.details.formDTO.formDetailDTOS = formDetailDTOS
      },
      // 显示规则类型
      showFormType() {
        this.visible = true
      },
      titleRadioChange() {
        if (this.titleRadio === '1') {
          this.details.formDTO.title = '联系我们'
        } else {
          this.details.formDTO.title = ''
        }
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {},
          componentGoodsDTOS: [],
          audioDTO: {},
          componentVideoDTO: {},
          formDTO: {
            componentFormId: '',
            detailsId: '',
            title: '联系我们',
            buttonName: '确定提交',
            buttonColor: '#409EFF',
            formDetailDTOS: []
          },
          sellType: '0',
          listStyle: '1'
        }
      }
    }
  }
</script>
